<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="甘特图" data-page-identification="k_ko6hvkw5hl">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_3prxn0mxu3 自定义模板_x1ogqkqkx8 -->
            <div class="modal-title">
                <div class="left">
                    <!--                    <a-radio-group v-model:value="state.radioValue" @change="radioChange">-->
                    <!--                        <a-radio-button value="目标">目标</a-radio-button>-->
                    <!--                        <a-radio-button value="项目">项目</a-radio-button>-->
                    <!--                    </a-radio-group>-->
                    <div class="tip-color"> 计划进展 <div class="box1"></div> </div>
                    <div class="tip-color"> 实际进展正常完成 <div class="box2"></div> </div>
                    <div class="tip-color"> 实际进展延期或延期完成 <div class="box3"></div> </div>
                </div>
                <div class="right">
                    <div class="right-tip" v-if="state.radioValue === '项目'">
                        <a-form-item label="项目名称">
                            <a-select
                                show-search
                                style="width: 200px; overflow: hidden"
                                :options="state.projectList"
                                allow-clear
                                placeholder="请选择"
                                :field-names="{ label: 'projectName', value: 'projectId' }"
                                :filter-option="
                                    (input, option) => {
                                        return option.projectName.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                "
                                @focus="getProjectList"
                                v-model:value="state.gantFilter.projectId"
                                @change="getGantData"
                            />
                        </a-form-item>
                    </div>

                    <div class="right-tip" v-if="state.radioValue === '目标'">
                        <!--                        <a-form-item-->
                        <!--                            label="月份"-->
                        <!--                            :labelCol="{ span: 8 }"-->
                        <!--                            :wrapperCol="{ span: 16 }"-->
                        <!--                            style="height: 32px; width: 300px"-->
                        <!--                            name="month"-->
                        <!--                        >-->
                        <!--                            <a-date-picker-->
                        <!--                                @change="getGantData"-->
                        <!--                                picker="month"-->
                        <!--                                style="width: 100%"-->
                        <!--                                v-model:value="state.gantFilter.month"-->
                        <!--                                value-format="YYYY-MM"-->
                        <!--                                :allow-clear="false"-->
                        <!--                            />-->
                        <!--                        </a-form-item>-->
                    </div>
                    <div class="right-tip">
                        <a-form-item label="任务类型">
                            <a-select
                                show-search
                                style="width: 200px; overflow: hidden"
                                :options="[
                                    {
                                        label: '全部',
                                        value: 'ALL'
                                    },
                                    {
                                        label: '关键路径任务',
                                        value: 'KEYNOTE'
                                    },
                                    {
                                        label: '其它',
                                        value: ' OTHER'
                                    },
                                    {
                                        label: 'SOP任务',
                                        value: 'SOP'
                                    }
                                ]"
                                allow-clear
                                placeholder="请选择"
                                :max-tag-count="1"
                                v-model:value="state.gantFilter.taskType"
                                @change="getGantData"
                            />
                        </a-form-item>
                    </div>
                    <a-button type="primary" @click="resetGant"> 重置 </a-button>

                    <a-button type="primary" @click="scrollToTodayColumn">今天</a-button>
                </div>
            </div>
            <div class="kb-table-box">
                <a-table
                    bordered
                    :pagination="false"
                    :columns="state.kbColumns"
                    :data-source="state.kbDataSource"
                    :scroll="{ x: 'max-content', y: 600 }"
                    ref="kbTbRef"
                    :loading="state.gantLoading"
                    rowKey="key"
                    @resizeColumn="handleTaskResizeColumn"
                >
                    <template #headerCell="{ title, column }">
                        <template v-if="column.today">
                            <div class="colun-today"
                                >{{ title }}
                                <div class="today-line"></div>
                                <div class="today-flag">今天</div>
                            </div>
                        </template>
                    </template>
                    <template #bodyCell="{ column, record, text }">
                        <template
                            v-if="
                                ![
                                    '项目名称',
                                    '月份',
                                    '总目标',
                                    '子目标',
                                    '用户故事',
                                    '任务名称',
                                    '任务状态',
                                    '计划开始',
                                    '计划结束',
                                    '负责人'
                                ].includes(column.title)
                            "
                        >
                            <div class="color-div" v-if="text">
                                <div
                                    class="div-item"
                                    :style="{
                                        backgroundColor: text.plan ? '#FFE58F' : '#fff'
                                    }"
                                ></div>
                                <div class="line-table" v-if="text.today"></div>
                                <div
                                    class="div-item"
                                    :style="{
                                        backgroundColor: getColor(text.actual)
                                    }"
                                >
                                </div>
                            </div>
                            <div v-else class="color-div">
                                <div class="div-item"></div>
                                <div class="line-table" v-if="column.today"></div>
                                <div class="div-item"> </div>
                            </div>
                        </template>
                        <template v-if="column.title === '用户故事'">
                            <div class="default-gant-title-xmjd" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
                            }}</div>
                        </template>
                        <template v-if="column.title === '任务名称'">
                            <div class="default-gant-title-rwmc" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
                            }}</div>
                        </template>
                        <template v-if="column.title === '总目标'">
                            <div class="default-gant-title-total" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
                            }}</div>
                        </template>
                        <template v-if="column.title === '子目标'">
                            <div class="default-gant-title-zmb" :title="record[column.dataIndex]">{{
                                record[column.dataIndex]
                            }}</div>
                        </template>
                    </template>
                </a-table>
            </div>
            <!-- end vid_3prxn0mxu3 自定义模板_x1ogqkqkx8 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'id': {
            type: [String, Number],
            default: undefined
        },
        'time': {
            type: [String],
            default: undefined
        },
        'projectName': {
            type: [String],
            default: undefined
        }
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const { id, time, projectName } = props
    const useId = ref()
    const useYear = ref()
    const useMonth = ref()
    const useName = ref()
    const useTimeList = ref([])
    import { watchEffect } from 'vue'
    watchEffect(() => {
        if (props.id || props.projectName) {
            setTimeout(() => {
                useId.value = props.id
                if (props.time) {
                    const [year, month] = props.time.split('-')
                    useYear.value = year
                    useMonth.value = props.time
                }
                if (props.projectName) {
                    useName.value = props.projectName
                }
                getGantData()
            }, 500)
        }
    })
    //     获取项目
    function getProjectList() {
        get(`/solution-ppm/api/v2/built-in-system-ppm/pdtm/sprint_project/search/related/${useId.value} `).then(
            data => {
                state.projectList = data.data
            }
        )
    }
    const state = reactive({
        radioValue: '目标',
        searchForm: {
            dateYear: '',
            projectType: undefined,
            projectIdList: [],
            userList: []
        },
        gantLoading: false,
        projectList: [],
        gantFilter: {
            projectId: undefined,
            month: undefined,
            taskType: 'ALL'
        },
        kbDataSource: [],
        kbColumns: [],
        gantColumns: [],
        sopFinish: 0,
        taskFinish: 0,
        targetFinish: 0
    })
    const currentData = ref({})
    const targetColumns = ref([
        {
            title: '项目详情',
            align: 'center',
            children: [
                {
                    title: '月份',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'month',
                    ellipsis: true,
                    customCell: ({ monthRowSpan }) => {
                        return {
                            rowSpan: monthRowSpan
                        }
                    }
                },
                {
                    title: '总目标',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'goals',
                    resizable: true,
                    ellipsis: true,
                    customCell: ({ goalsRowSpan }) => {
                        return {
                            rowSpan: goalsRowSpan
                        }
                    }
                },
                {
                    title: '子目标',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'projectGoals',
                    resizable: true,
                    ellipsis: true,
                    customCell: ({ projectGoalsRowSpan }) => {
                        return {
                            rowSpan: projectGoalsRowSpan
                        }
                    }
                },
                {
                    title: '用户故事',
                    width: 100,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'storyName',
                    ellipsis: true,
                    customCell: ({ milepostRowSpan }) => {
                        return {
                            rowSpan: milepostRowSpan
                        }
                    }
                },
                {
                    title: '任务名称',
                    width: 300,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'taskName',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '任务状态',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskStatus',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划开始',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'startTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划结束',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'endTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '负责人',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskOwner',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                }
            ]
        }
    ])
    const projectCoumns = ref([
        {
            title: '项目详情',
            align: 'center',
            children: [
                {
                    title: '项目名称',
                    width: 100,
                    align: 'center',
                    fixed: 'left',
                    dataIndex: 'projectName',
                    ellipsis: true,
                    customCell: ({ projectRowSpan }) => {
                        return {
                            rowSpan: projectRowSpan
                        }
                    }
                },
                {
                    title: '用户故事',
                    width: 100,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'storyName',
                    ellipsis: true,
                    customCell: ({ milepostRowSpan }) => {
                        return {
                            rowSpan: milepostRowSpan
                        }
                    }
                },
                {
                    title: '任务名称',
                    width: 280,
                    fixed: 'left',
                    resizable: true,
                    align: 'center',
                    dataIndex: 'taskName',
                    ellipsis: true
                },
                {
                    title: '任务状态',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskStatus',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划开始',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'startTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '计划结束',
                    width: 80,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'endTime',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                },
                {
                    title: '负责人',
                    width: 60,
                    fixed: 'left',
                    align: 'center',
                    dataIndex: 'taskOwner',
                    ellipsis: true,
                    customCell: () => {
                        return {
                            style: {
                                padding: '0 5px'
                            }
                        }
                    }
                }
            ]
        }
    ])
    const kbTbRef = ref(null)

    function getGantData() {
        state.gantLoading = true
        //   TODO调甘特图
        post('/solution-ppm/api/v2/built-in-system-ppm/pdtm/goals/gantt/search', {
            projectId: useName.value,
            dateYear: useYear.value,
            taskType: state.gantFilter.taskType,
            monthList: useMonth.value ? [useMonth.value, useMonth.value] : undefined,
            ganttTypeEnum: state.radioValue === '目标' ? 'GOALS' : 'PROJECT',
            sprintId: state.gantFilter.projectId ? state.gantFilter.projectId : null
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    state.kbDataSource = []
                    if (state.radioValue === '项目') {
                        state.kbDataSource = []
                        state.kbColumns = [...projectCoumns.value]
                    } else {
                        state.kbDataSource = []
                        state.kbColumns = [...targetColumns.value]
                    }
                    return
                }
                let columns = data.data.columns.map(item => {
                    return {
                        ...item, // 保留其他字段
                        children: item.children.map(child => ({
                            ...child,
                            width: 20 // 强制设置相同宽度
                        }))
                    }
                })
                state.gantColumns = columns
                // 格式化函数
                const formattedData =
                    (Array.isArray(data.data.dataSource) ? data.data.dataSource : []).map((item, index) => {
                        const { dataMap, ...rest } = item // 分离出 dataMap 和其他字段
                        return {
                            ...rest, // 保留其他字段
                            ...dataMap, // 将 dataMap 展开为直接字段
                            key: item.id || `key-${index}-${Date.now()}` // 如果有 id 字段，则使用 id 作为 key，否则使用索引和时间戳组合生成唯一的 key
                        }
                    }) || []

                state.kbDataSource = formattedData
                if (state.radioValue === '项目') {
                    state.kbDataSource = groupData(state.kbDataSource)
                    state.kbColumns = [...projectCoumns.value, ...state.gantColumns]
                } else {
                    state.kbDataSource = groupTargetData(state.kbDataSource)
                    console.log(state.kbDataSource)
                    state.kbColumns = [...targetColumns.value, ...state.gantColumns]
                }
                state.sopFinish = data.data.sopRatio
                state.taskFinish = data.data.userStoryRatio

                scrollToTodayColumn()
            })
            .finally(() => {
                state.gantLoading = false
            })
    }
    function groupData(data) {
        let currentProjectName = ''
        let currentMilepostName = ''
        let projectRowSpan = 0
        let milepostRowSpan = 0

        return data.map((item, index) => {
            // 如果 projectName 变化，重置 projectRowSpan，并计算新的 rowSpan
            if (currentProjectName !== item.projectName) {
                currentProjectName = item.projectName
                projectRowSpan = 1

                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].projectName === item.projectName) {
                        projectRowSpan++
                    } else {
                        break
                    }
                }
                item.projectRowSpan = projectRowSpan
            } else {
                item.projectRowSpan = 0
            }

            // 如果 storyName 变化，重置 milepostRowSpan，并计算新的 rowSpan
            if (currentMilepostName !== item.storyName) {
                currentMilepostName = item.storyName
                milepostRowSpan = 1

                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].storyName === item.storyName) {
                        milepostRowSpan++
                    } else {
                        break
                    }
                }
                item.milepostRowSpan = milepostRowSpan
            } else {
                item.milepostRowSpan = 0
            }

            return item
        })
    }
    function groupTargetData(data) {
        let currentMilepostName = ''
        let currentProjectGoals = ''
        let currentGoals = ''
        let currentMonth = ''

        let milepostRowSpan = 0
        let projectGoalsRowSpan = 0
        let goalsRowSpan = 0
        let monthRowSpan = 0

        return data.map((item, index) => {
            let tempProjectGoals = currentProjectGoals
            // 如果 storyName 和 projectGoals 都变化，重置 milepostRowSpan，并计算新的 rowSpan
            if (currentMilepostName !== item.storyName || currentProjectGoals !== item.projectGoals) {
                currentMilepostName = item.storyName
                currentProjectGoals = item.projectGoals
                milepostRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].storyName === item.storyName && data[i].projectGoals === item.projectGoals) {
                        milepostRowSpan++
                    } else {
                        break
                    }
                }
                item.milepostRowSpan = milepostRowSpan
            } else {
                item.milepostRowSpan = 0
            }

            // 如果 projectGoals 变化，重置 projectGoalsRowSpan，并计算新的 rowSpan
            if (tempProjectGoals !== item.projectGoals) {
                currentProjectGoals = item.projectGoals
                projectGoalsRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].projectGoals === item.projectGoals) {
                        projectGoalsRowSpan++
                    } else {
                        break
                    }
                }
                item.projectGoalsRowSpan = projectGoalsRowSpan
            } else {
                item.projectGoalsRowSpan = 0
            }

            // 如果 goals 变化，重置 goalsRowSpan，并计算新的 rowSpan
            if (currentGoals !== item.goals) {
                currentGoals = item.goals
                goalsRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].goals === item.goals) {
                        goalsRowSpan++
                    } else {
                        break
                    }
                }
                item.goalsRowSpan = goalsRowSpan
            } else {
                item.goalsRowSpan = 0
            }

            // 如果 month 变化，重置 monthRowSpan，并计算新的 rowSpan
            if (currentMonth !== item.month) {
                currentMonth = item.month
                monthRowSpan = 1
                for (let i = index + 1; i < data.length; i++) {
                    if (data[i].month === item.month) {
                        monthRowSpan++
                    } else {
                        break
                    }
                }
                item.monthRowSpan = monthRowSpan
            } else {
                item.monthRowSpan = 0
            }

            return item
        })
    }
    function scrollToTodayColumn() {
        const table = kbTbRef.value.$el.querySelector('.ant3-table-body')
        const todayColumnIndex = state.kbColumns.flatMap(col => col.children || col).findIndex(col => col.today)
        if (todayColumnIndex !== -1 && table) {
            const columnWidth = 50 // 假设每列宽度为 50，根据实际列宽度调整

            // 等待渲染完成后进行滚动
            nextTick(() => {
                setTimeout(() => {
                    const headerCells = table.querySelectorAll('.ant-table-thead th')
                    headerCells.forEach((cell, index) => {
                        const column = state.kbColumns[index]
                        if (column.width) {
                            cell.style.width = column.width + 'px'
                        }
                    })
                    table.scrollLeft = todayColumnIndex * columnWidth - 850 // 减去 500 像素的偏移量
                }, 100) // 可以根据需要调整延迟时间（比如 100 毫秒）
            })
        }
    }
    function resetGant() {
        state.gantFilter.projectId = undefined
        state.gantFilter.taskType = 'ALL'
        getGantData()
    }
    const colorMap = {
        'plan': '#FFE58F',
        'default': '#C7F870',
        'delay': '#FC4C29'
    }

    function getColor(record) {
        if (!record) return '#fff' // 默认值
        return colorMap[record] || '#C7F870' // 如果没有匹配到颜色，则返回默认颜色
    }
    function radioChange() {
        state.kbDataSource = []
        if (state.radioValue === '项目') {
            state.gantFilter.month = undefined
        } else {
            state.gantFilter.projectId = undefined
            const currentMonth = dayjs().format('YYYY-MM')
            state.gantFilter.month = currentMonth
        }
        getGantData()
    }
    import { nextTick } from 'vue'
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }

    /*样式*/
    .modal-title {
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
    }
    .left,
    .right {
        gap: 10px;
        display: flex;
        align-items: center;
    }
    .tip-color {
        display: flex;
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 400;
        align-items: center;
        gap: 4px;
    }
    .right-tip {
        height: 32px;
        line-height: 32px;
    }
    .kb-table-box {
        position: relative;
        margin-bottom: 29px;
    }

    .kb-table-box
        :deep(.ant3-table.ant3-table-bordered > .ant3-table-container > .ant3-table-header > table > thead > tr > th) {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        padding: 0 !important;

        .word-wrap {
            word-break: break-all !important;
        }
    }
    .kb-table-box:deep(
            .ant3-table.ant3-table-bordered > .ant3-table-container > .ant3-table-body > table > tbody > tr > td
        ) {
        padding: 0;
    }
    .colun-today {
        position: relative;
    }
    .today-line {
        position: absolute;
        top: -23px;
        height: 50px;
        left: 47%;
        background-color: #fff;
        width: 1px;
        border-left: 1px dashed #3875ff;
    }
    .today-flag {
        position: absolute;
        top: -23px;
        left: -8px;
        width: 35px;
        height: 20px;
        line-height: 20px;
        color: #fff;
        background-color: #3875ff;
        text-align: center;
        opacity: 0.6;
    }
    .color-div {
        position: relative;
        height: 26px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .div-item {
        flex: 1;
    }
    .line-table {
        position: absolute;
        top: -5px;
        height: 50px;
        left: 50%;
        background-color: #fff;
        width: 1px;
        border-left: 1px dashed #3875ff;
    }
    .default-gant-title-xmjd,
    .default-gant-title-rwmc,
    .default-gant-title-total,
    .default-gant-title-zmb {
        padding: 0 5px;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
    }
    .default-gant-title-rwmc {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 300px;
    }
    .box1,
    .box2,
    .box3 {
        width: 32px;
        height: 8px;
        background: #ffe58f;
    }

    .box2 {
        background: #c7f870;
    }

    .box3 {
        background: #fc4c29;
    }
</style>
